<template>
  <div class="app-container">
    <el-col>
        <!-- :inline="true" 将表单放到一行 -->
        <el-form ref="searchForm" :inline="true" :model="searchForm" size="small">
          <el-form-item prop="id">
            <el-input v-model="searchForm.id" placeholder="商品id" />
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="searchForm.name" placeholder="商品名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goto(1)">搜索</el-button>
            <el-button type="danger" @click="resetSearch">重置</el-button>
            <el-button type="success" @click="addProduct" >添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table
    :data="products"
    border
    style="width: 100%">
    <el-table-column
      align = "center"
      prop="id"
      label="id"
      width="120">
    </el-table-column>
    <el-table-column
      align = "center"
      prop="name"
      label="商品名称"
      width="180">
    </el-table-column>
    <el-table-column
      align = "center"
      prop="soldNum"
      label="已售数量"
      width="120">
    </el-table-column>
    <el-table-column
      align = "center"
      prop="status"
      label="商品状态"
      width="180">
       <template slot-scope="scope">
              <el-switch
                @change="changeStatus(scope.row.id, scope.row.status, scope.row.name)"
                :value="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
    </el-table-column>
    <el-table-column
      align = "center"
      prop="content"
      label="商品内容"
      width="180">
    </el-table-column>

    <el-table-column
      align = "center"
      label="商品图片"
      width="180">
      <!-- scope.row.productImgs[0].url.split(",").length-1 -->
      <template slot-scope="scope">
        <el-image 
          style="width: 100px; height: 100px"
          @click="a(scope.row.productImgs)"
          :src='scope.row.productImgs[0].url.split(",")[scope.row.productImgs[0].url.split(",").length-1]'
          :preview-src-list="srcList">
        </el-image>
      </template>
    </el-table-column>

    <el-table-column
        align = "center"
        width="205"
        label="操作">
      <template slot-scope="scope">
                <el-button type="info" size="mini" @click.prevent="updateProd(scope.row.id)">编辑</el-button>
                <el-button size="mini" @click="delProd(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
   <!-- 分页 -->
  <el-row style="margin-top:20px" >
    <el-pagination
      style="float: right"
      background
      :current-page="current"
      layout="prev, pager, next"
      @current-change="goto"
      :total="total"
      :page-size="10"
      >
    </el-pagination>
  </el-row>

  <add-product-dialog ref="addProduct" @refresh="goto"></add-product-dialog>
  <edit-product-dialog ref="editProduct"  @refresh="goto"></edit-product-dialog>
  </div>
</template>

<script>
import http from '@/utils/request'
import AddProductDialog from '@/components/Product/AddProductDialog'
import EditProductDialog from '@/components/Product/EditProductDialog'


export default {
  components: { AddProductDialog, EditProductDialog },
    data() {
      return {
        srcList: [],
        searchForm: {
          id:'',
          name: ''
        },
        current:0,
        total:0,
        products: []
      }
    },
    mounted(){
      this.goto()
    },
    
    methods:{
      goto(current = 1) {
      http.get('/ProductController', {
        params: {
          current: current,
          ...this.searchForm
        }
      }).then(res => {
         let datas = res.data.data
         this.products = datas.data
         this.current = datas.current
         this.total = datas.total
      })
    },
    // 重置
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.goto()
    },
    updateProd(id){
        this.$refs.editProduct.$data.showEditProductDialog = true;
         console.log(id);
        http.get(`/ProductController/${id}`)
            .then(res =>{
              console.log(res.data.data);
              let datas = res.data.data
              this.$refs.editProduct.$data.editProductFrom.id=id
              this.$refs.editProduct.$data.editProductFrom.name=datas.name
              this.$refs.editProduct.$data.editProductFrom.content=datas.content
              let fileList = this.$refs.editProduct.$data.fileList
              fileList.splice(0,fileList.length);

              let urlArr = datas.productImgs[0].url.split(",")
        
              urlArr.map(u => {
                    fileList.push({'url':u})
                })



              // this.$refs.editProduct.$data.fileList=
              // [{url:'https://spring1024.oss-cn-beijing.aliyuncs.com/2022/02/21/13e8f68e95284e73aa31ff4427e1c6232.png'},
              // {url:'https://spring1024.oss-cn-beijing.aliyuncs.com/2022/02/21/13e8f68e95284e73aa31ff4427e1c6232.png'}]
              
            })
    },
    // 添加
    addProduct() {
      this.$refs.addProduct.$data.showAddProductDialog = true;
    },
    delProd(id){
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          http.get(`/ProductController/d/${id}`).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
              duration: 2000,
            });
            this.goto();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 2000,
          });
        });
    },// 改变对应的用户状态
    changeStatus(id, status, name) {
       this.$confirm(`你是否要${status == 1 ? '禁用' : '启用'} ${name}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  // 用户点击确认
           http.put(`/ProductController/${id}`, {
             status: status
           }).then(() => {
              http.get(`/ProductController/${id}`)
                .then(res => {
                  //为了避免前端整个表格全部重新渲染，我们只需要改变被改变的数据即可
                  let su = res.data.data
                  // 获取到数据对应的索引
                  let idx = this.products.findIndex(u => u.id == su.id)
                  // 将对应的数据替换掉，那么这个dom只会重新渲染当前行
                  this.products.splice(idx, 1, su)
                })
           })
        }).catch()  // 用户点击取消
    },a(pro){
      let Stringurl = pro[0].url
      this.srcList = Stringurl.split(",")
    }
  }
}
</script>

<style>

</style>


